import React, { useState } from 'react';
import { Row, Col, Form, Select, Button, Input, InputNumber } from 'antd';
import { VerticalRightOutlined, VerticalLeftOutlined } from '@ant-design/icons';
import { groupByCates } from './configs';

export default function Terms({ prefixField }) {
  const [expanded, setExpanded] = useState(false);
  return (
    <Row gutter={16} data-oid='kjx6rug'>
      <Col flex='auto' data-oid='3g:l7x.'>
        <Row gutter={16} data-oid='jv9neke'>
          <Col span={expanded ? 6 : 12} data-oid='f9kmsbs'>
            <Form.Item {...prefixField} name={[prefixField.name, 'cate']} noStyle data-oid='cfq672t'>
              <Select style={{ width: '100%' }} data-oid='8ksk_m3'>
                {groupByCates.map((func) => (
                  <Select.Option key={func} value={func} data-oid='p-0lyo2'>
                    {func}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={expanded ? 6 : 12} data-oid='-71v_or'>
            <Form.Item {...prefixField} name={[prefixField.name, 'field']} noStyle data-oid='hoh.cqo'>
              <Input placeholder='Field key' data-oid='3.2:ks-' />
            </Form.Item>
          </Col>
          {expanded && (
            <>
              <Col span={6} data-oid='g1vx9z-'>
                <Input.Group data-oid='-n8qt9v'>
                  <span className='ant-input-group-addon' data-oid='hayjoy6'>
                    步长
                  </span>
                  <Form.Item {...prefixField} name={[prefixField.name, 'size']} noStyle data-oid='jtnsmxh'>
                    <InputNumber style={{ width: '100%' }} data-oid=':.vq3m7' />
                  </Form.Item>
                </Input.Group>
              </Col>
              <Col span={6} data-oid='r.jf84n'>
                <Input.Group data-oid='a7xpv7-'>
                  <span className='ant-input-group-addon' data-oid='5c::2m.'>
                    文档最小值
                  </span>
                  <Form.Item {...prefixField} name={[prefixField.name, 'min_value']} noStyle data-oid='6jbdnk:'>
                    <InputNumber style={{ width: '100%' }} data-oid='2_2l.5.' />
                  </Form.Item>
                </Input.Group>
              </Col>
            </>
          )}
        </Row>
      </Col>
      <Col flex='88px' data-oid='ebpfcpp'>
        <Button
          onClick={() => {
            setExpanded(!expanded);
          }}
          data-oid='pl7ya98'
        >
          高级设置 {expanded ? <VerticalLeftOutlined data-oid='j.c:8dz' /> : <VerticalRightOutlined data-oid='d_hxfym' />}
        </Button>
      </Col>
    </Row>
  );
}
